<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        .ul1 {
            padding: 0;
            list-style: none;
            display: flex;
        }

        .li1 {
            height: 50px;
            width: 100px;
            line-height: 50px;
            border: 1px solid #ccc;
            text-align: center;
            float: left;
            margin-right: 10px;
        }
    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <!-- 搜索 -->
    <template id="control">
        <div class="container" style="border: 1px solid #ccc">
            <form class="form-inline" style="padding: 10px;" role="form">
                <button type="button" class="btn btn-primary" @click='clickTab(false)'>列表视图</button>
                <button type="button" class="btn btn-primary" @click='clickTab(true)'>网格视图</button>
                <div class="form-group">
                    <!-- <label class="sr-only" for="">label</label> -->
                    <input type="text" class="form-control" id="" placeholder="查询" v-model="keyword">
                </div>
            </form>
        </div>
    </template>

    <script>
        const control = {
            template: '#control',
            data() {
                return { keyword: '' }
            },
            methods: {
                clickTab(flag) {
                    this.$emit('change', flag)
                },
            }
            , watch: {
                deep: true,
                keyword: {
                    handler(newVal, oldVal) {
                        console.log("深度监听到了对象的变化");
                        // console.log(newVal);
                        this.$emit('ting', newVal)
                    }
                }

            }
        }
        Vue.component('control', control)
    </script>

    <!-- 列表 -->
    <template id="list">
        <div class="container" style="padding-left:0;padding-right: 0px;">
            <ul class="list-group">
                <li class="list-group-item" v-for='item in list'>{{item.content}}</li>
            </ul>
        </div>

    </template>

    <script>
        const list = {
            template: '#list',
            props: {
                list: {
                    type: Array
                }
            }
        }
        Vue.component('list', list)
    </script>

    <!-- 网格 -->
    <template id="grid">
        <div class="container" style="padding-left: 0;padding-right: 0px;">
            <ul class="ul1">
                <li class="li1" v-for='item in list'>{{item.content}}</li>
            </ul>
        </div>
    </template>

    <script>
        const grid = {
            template: '#grid',
            props: {
                list: {
                    type: Array
                }
            }
        }
        Vue.component('grid', grid)
    </script>

    <div id='app'>
        <control @change='viewChange' @ting='jian'></control>
        <list :list="searchList" v-show='!flag'></list>
        <grid :list="searchList" v-show='flag'></grid>

    </div>


    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                list: [{
                    content: "test1.txt"
                }, {
                    content: "test2.txt"
                }, {
                    content: "test3.txt"
                }, {
                    content: "test4.txt"
                }, {
                    content: "testtest5.txt"
                }],
                flag: true,
                keyword: ''

            },
            methods: {
                viewChange(e) {
                    console.log(e);
                    this.flag = e
                },
                jian(e) {
                    this.keyword = e
                }
            },
            computed: {
                searchList() {
                    return this.list.filter(item => item.content.includes(this.keyword))
                }
            },
        })
    </script>
</body>

</html